<template>
  <div class="rise-sun">
    <Header title="气候变化灾害统计" />
    <div class="nav-btn">
      <div class="btn-left">
        <a @click.prevent="changeView('Detail')">
          <div class="btn-list">☆☆文字列表视图☆☆</div>
        </a>
      </div>
      <div class="btn-right">
        <a @click.prevent="changeView('KnowledgeGraph')">
          <div class="btn-list">☆☆词云统计视图☆☆</div>
        </a>
      </div>
    </div>
    <div class="main">
      <el-row>
        <el-col :span="12" :xs="24" :sm="24" :md="12">
          <div class="left-chart">
            <RiseSun
              :key="sizeAdjust.flag"
              :height="sizeAdjust.height"
              :width="sizeAdjust.width"
              @updateDetail="updateDetail"
            />
          </div>
        </el-col>
        <el-col :span="12" :xs="24" :sm="24" :md="12">
          <div class="right-content">
            <transition name="ivy-zoom-in-center-y">
              <component
                :is="componentId"
                :key="sizeAdjust.flag"
                :mete="defaultDetail"
                :height="sizeAdjust.height"
                :width="sizeAdjust.width"
              />
            </transition>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="footer" />
  </div>
</template>

<script>
import { Chart } from '@/config/chart'
import { DetailList } from '@/config/detailList'
import { adjust } from '@/utils/adjust'
import detailData from '@/utils/generateDetail'

export default {
  name: 'Sun',
  components: {
    Header: () => import('@/components/header'),
    RiseSun: () => import('./charts/RiseSun'),
    Detail: () => import('./charts/Detail'),
    KnowledgeGraph: () => import('./charts/KnowledgeGraph')
  },
  data() {
    return {
      componentId: 'Detail',
      sizeAdjust: new Chart('0px', '0px', 0, null, null),
      // new Chart('0px', '0px', 0, null, null)
      defaultDetail: new DetailList(
        'https://theblogimage.oss-cn-fuzhou.aliyuncs.com/imagefortypora/high%20temperature.jpg',
        '高温',
        '高温天气指温度较长时间保持在较高水平的气候现象，通常会出现在夏季。当温度达到一定程度时，会对人们的健康和日常生活造成一定的影响。',
        '高温天气的规模通常涉及较大区域，例如整个地区或多个城市。高温天气可以导致人们体内失水过多，引起中暑等健康问题；对于年老体弱的人、儿童、孕妇和病患人群来说，高温天气的影响更为严重。此外，在农业方面，高温天气会加速作物的生长进程，同时也增加了干旱和火灾等自然灾害的发生几率；在工业领域，高温天气对电力供应和交通运输也可能造成一定的影响',
        '加强预警和信息发布，提醒公众避免在高温时段长时间户外活动和暴晒，同时加强对易受高温天气影响的人群的照料和帮助。公众应自觉减少户外活动，适当调整作息时间，增加补水和防暑降温措施。农业部门可以采用遮荫、喷灌等方式对农作物进行保护；工业企业需要确保设备安全运行，适当调整生产计划，以保障供电和交通等基础设施的正常运营',
        [
          '高温',
          '天气',
          '炎热',
          '酷暑',
          '炎夏',
          '热浪',
          '热量',
          '防晒',
          '温度',
          '炙烤',
          '灼热',
          '汗水',
          '空调',
          '古井不波',
          '皮肤',
          '暑假',
          '温暖',
          '夏季',
          '气温',
          '凉爽'
        ]
      )
    }
  },
  mounted() {
    const sunDom = document.querySelector('.left-chart')

    this.sizeAdjust.dom = sunDom

    if (this.sizeAdjust && this.sizeAdjust.dom) {
      adjust(this.sizeAdjust)
    }
  },
  beforeDestroy() {
    if (this.sizeAdjust.dom && this.sizeAdjust.observer) {
      this.sizeAdjust.observer.unobserve(this.sizeAdjust.dom)
    }
  },
  methods: {
    updateDetail(name) {
      for (const item of detailData) {
        if (item.name === name) {
          this.defaultDetail = item
          break
        }
      }
    },
    // 动态组件名
    changeView(name) {
      this.componentId = name
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/topBtnList.scss';

.rise-sun {
  height: 100vh;
  overflow: hidden;
  background: url('https://demo-oss-video.oss-cn-fuzhou.aliyuncs.com/image/bg.jpg?x-oss-process=style/process')
    no-repeat center;
  background-size: cover;

  @include topBtn;

  .main {
    height: 100vh;

    .el-row {
      height: 100%;

      .el-col {
        height: 100%;

        .left-chart,
        .right-content {
          width: 100%;
          height: 100%;

          .ivy-zoom-in-center-y-enter-active,
          .ivy-zoom-in-center-y-leave-active {
            transition: all 0.3s ease;
          }

          .ivy-zoom-in-center-y-enter-from,
          .ivy-zoom-in-center-y-leave-to {
            opacity: 0;
            transform: scaleX(0);
            transform-origin: center center;
          }

          .ivy-zoom-in-center-y-enter-to,
          .ivy-zoom-in-center-y-leave-from {
            opacity: 1;
            transform: scaleX(1);
            transform-origin: center center;
          }
        }
      }
    }
  }
}
</style>
